<template>
  <div class="box">
    <p-modal
      title="新增"
      :visible="skillVisible"
      :confirm-loading="skillConfirmLoading"
      @ok="addLabel"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-form-model-item ref="name" label="产品编码" prop="name">
          <p-input disabled :value="form.mcode"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="产品名称" prop="name">
          <p-input disabled :value="form.mname"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="name" label="产品描述" prop="name">
          <p-input disabled :value="form.mexplain"></p-input>
        </p-form-model-item>

        <p-form-model-item ref="labelTemplateName" label="标签模板编码" prop="labelTemplateName">
					<p-select
						show-search
						placeholder="Select a person"
						option-filter-prop="children"
						style="width: 200px"
						v-model="form.labelTemplateName"
						:filter-option="filterOption"
						@focus="handleFocus"
						@blur="handleBlur"
						@change="handleChange"
					>
						<p-select-option :value="item.labelTemplateName" v-for="(item, index) in mesBcTemplateList" :key="index">
							{{item.labelTemplateName}}
						</p-select-option>
					</p-select>        
        </p-form-model-item>

      </p-form-model>

    </p-modal>
  </div>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction } from "@/api/manage";

export default {
  props: {
    mainId: {
      type: String,
    },
  },

  data() {
    return {
      skillVisible: false,
      skillConfirmLoading: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        mcode: "",
        mname: "",
        mexplain: "",
        labelTemplateName: "",
      },
      rules: {
        labelTemplateName: [
          { required: true, message: '标签模板编码', trigger: 'blur' },
        ],				
			},
			mesBcTemplateList: [],			
      url: {
        info: "/mes-code/mesBcProductLabel",
				add: "/mes-code/mesBcProductList",
				mesBcTemplateList: '/mes-code/mesBcTemplate/all', // 标签信息列表
      },
    };
  },

  watch: {
    mainId(newVal, oldVal) {
      this.getInfo();
    },
  },

  mounted() {
		this.getInfo();
		this.getMesBcTemplateList()
  },
  methods: {

		addLabel(){

      this.$refs.ruleForm.validate(valid => {
        if (valid) {
					let lableInfo;
					this.mesBcTemplateList.forEach( ele => {
						if (ele.labelTemplateName == this.form.labelTemplateName) {
							lableInfo = ele
						}
					} )
		
					const params = {
						mesProductLabelId: this.mainId,
						labelTemplateId: lableInfo.id,
						...lableInfo
					}
					postAction( this.url.add, params ).then( res => {
						if (res.success) {
							this.$emit('ok')
							this.skillConfirmLoading = false
							this.skillVisible = false
						}else {
							this.$message.error(res.msg)
						}
					} )
        } else {
          console.log('error submit!!');
          return false;
        }
      });

		},

		getMesBcTemplateList() {
			const parmas = {
				pageSize: 1000,
			}
			getAction(this.url.mesBcTemplateList, parmas).then( res => {
				if ( res.success) {
					this.mesBcTemplateList = res.data
				}
			} )
		},

    getInfo() {
      getAction(this.url.info + '/' + this.mainId).then((res) => {
        if (res.success) {
					this.form = res.data
        }
      });
    },

    showModal() {
      this.skillVisible = true;
    },
    handleCancel() {
      this.skillVisible = false;
    },
    comfirm() {
      console.log("ok");
    },

    showSubModal() {
      this.$refs.modalForm.showModal();
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },

    selectSkillOk(selectSkillArr) {
      this.selectSkillArr = selectSkillArr;
		},
		
		handleChange(value) {
			console.log(`selected ${value}`);
		},
		handleBlur() {
			console.log('blur');
		},
		handleFocus() {
			console.log('focus');
		},
		filterOption(input, option) {
			return (
				option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			);
		},

  },
  components: {
  },
};
</script>

<style lang="less" scoped>
.skill-box {
  cursor: pointer;
  border: 1px solid #ddd;
  min-height: 40px;
}
</style>
